<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        模板内容
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../css/main.css" media="all">
<!--    <link rel="stylesheet" href="../../../lib/layui/css/layui_2.5.7.css">-->
    <link rel="stylesheet" href="../../../lib/layui2.0/css/layui.css" media="all">
    <script type="text/javascript" src="../../../lib/loading/okLoading.js"></script>
</head>
<style>
 .layui-tab-title > li:first-child{
     background-color: #fff;
 }

 /*.layui-tab-content > div:first-child{*/
 /*    display: block!important;*/
 /*}*/

 /*.fuxuanSelect {*/
 /*    height: auto!important;*/
 /*    line-height: normal!important;*/
 /*    min-width: 18px;*/
 /*    min-height: 18px;*/
 /*    border: none!important;*/
 /*    margin-right: 0;*/
 /*    padding-left: 28px;*/
 /*    padding-right: 0;*/
 /*    background: 0 0;*/
 /*}*/

</style>

<body>
<div class="x-body" id="app">
<!--    <form class="layui-form" action="">-->
<!--    <div class="layui-form-item">-->
        <div class="layui-tab" lay-filter="demo" id="demo">
            <ul class="layui-tab-title">
            </ul>
            <div class="layui-tab-content">
            </div>
        </div>
<!--    </div>-->
<!--    </form>-->
</div>
<script type="text/javascript" src="../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../js/myAjax.js"></script>
<script type="text/javascript" src="../../../js/pub.js"></script>
<!--<script src="../../../lib/layui/layui2.5.7.js" charset="utf-8"></script>-->
<script src="../../../lib/layui/layui-v2.5.7/layui/layui.js" charset="utf-8"></script>
<script src="../../../js/x-layui.js" charset="utf-8"></script>
<script src="../../../js/vue.min.js" charset="utf-8"></script>

<script>

    var templateId = getQueryVariable("templateId");

    layui.use(['laydate', 'form', 'layer'],
        function () {
            var laydate = layui.laydate;
            var $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;

            let request = {
                url: 'xa/template/findTemplateById',
                data: {
                    userId: $userId,
                    id:templateId
                },
            };
            sendRequest(request, (data) => {
                if (data.code === 0) {
                    form.val('updateInfo', {

                        "name": data.data.name,
                        "memo":data.data.memo
                    });
                } else {
                    layer.alert(data.msg, {
                        icon: 2
                    })
                }
            });

            //监听审批提交
            // form.on('submit(sub)',
            //     function (data) {
            //         let form = data.field;
            //         form.userId = $userId;
            //         form.id = templateId;
            //         form.level = 1;

                    // let request = {
                    //     url: 'xa/template/addAndUpdateTemplate',
                    //     data: form,
                    //     method: "post",
                    // };
                    // sendRequest(request, (data) => {
                    //
                    //         if (data.code === 0) {
                    //         layer.alert("操作成功", {
                    //                 icon: 6
                    //             },
                    //             function () {
                    //                 let index = parent.layer.getFrameIndex(window.name);
                    //                 parent.layer.close(index);
                    //                 parent.location.reload();
                    //             });
                    //     } else {
                    //         layer.alert(data.msg, {
                    //             icon: 5
                    //         })
                    //     }
                    //
                    // });
                //     return false;
                // });


        });


    const vm = new Vue({
        el: "#app",
        data: {
            tabList:[],
            billing: {
                id: null,
                name: null,
                taxpayerIdentificationNumber: null,
                addressAndTelephoneNumber: null,
                bankAndAccountNumber: null,
                contactInformation: null,
                billType: null,
                faceValue: null,
                billingDate: null,
                taxPoint: null,
                faceTax: null,
                associatedCredentials: null,
                associatedCredentialsId: null,
                remark: null,
                billAttachment: '',
                pictureOfReceipt: '',
                type: null,
                nature: null
            }
        },
        created() {

        },
        mounted() {
            var that = this;
            layui.use(['element', 'table', 'form', 'upload','layer'], function() {

                var $ = layui.jquery
                var table = layui.table;
                var form = layui.form;
                var upload = layui.upload;
                // var element = layui.element;//Tab的切换功能，切换事件监听等，需要依赖element模块
                var element = layui.element;
                var layer = layui.layer;

                okLoading.close($);


                let request = {
                    url: 'xa/template/findTemplateInfo',
                    data: {
                        userId: $userId,
                        id:templateId
                    },
                    method: "GET"
                }
                sendRequest(request, (res) => {
                    var childList = res.data.childList;
                    var firstId = childList[0].id;
                    console.log(firstId)
                    for(var i =0;i < childList.length;i++){
                        var childList2 = childList[i].childList;
                        var html1 ='<div style="margin-top: 20px">';
                        var html2 ='</div><hr style="margin-top: 80px"><span style="font-weight:bold">需要上传附件内容</span><div style="margin: 10px 8px">';
                        for(var j =0;j < childList2.length;j++){
                            if (childList2[j].fieldType === 0) {
                                html1 += '<span style="margin-right: 40px">'+childList2[j].name + '</span>';
                            }
                            if (childList2[j].fieldType === 1) {
                                html2 += '<span style="margin-top: 8px;display:block;">'+childList2[j].name + '</span><br>';
                            }

                        }
                        element.tabAdd('demo', {
                            title: childList[i].name
                            ,content: html1+html2+'</div>' //支持传入html
                            ,id: childList[i].id
                        });

                    }
                    element.tabChange('demo', firstId);
                    // var $tab = $('#demo');
                    // var $tabsTitle = $tab.find('.layui-tab-title > li')
                    // var $tabsContent = $tab.find('.layui-tab-content .layui-tab-item');
                    // $.each($tabsTitle,function (idx,ele){
                    //
                    //     if (idx == 0){
                    //         $(this).addClass('layui-this');
                    //         $tabsContent.eq(0).addClass('layui-show');
                    //     }else {
                    //         $(this).removeClass('layui-this');
                    //         $tabsContent.eq(idx).removeClass('layui-show');
                    //     }
                    // })
                })

            });
        },
        computed: {
            // bindSrcBillAttachment() {
            //     return vm.billing.billAttachment.startsWith('upload') ? $baseUrl +
            //         'other/viewUploadFile?id=' + vm.billing.billAttachment : '../../images/upload.png';
            // },
            // bindSrcPictureOfReceipt() {
            //     return vm.billing.pictureOfReceipt.startsWith('upload') ? $baseUrl +
            //         'other/viewUploadFile?id=' + vm.billing.pictureOfReceipt : '../../images/upload.png';
            // }
        },
        methods: {
            // uploadBillAttachment() {
            //     this.$refs.billAttachment.click()
            // },
            // uploadPictureOfReceipt() {
            //     this.$refs.pictureOfReceipt.click()
            // },
            // getTabList: function() {
            //     var that = this;
            //     let request = {
            //         url: 'xa/template/findTemplateInfo',
            //         data: {
            //             userId: $userId,
            //             id:templateId
            //         },
            //         method: "GET"
            //     }
            //     sendRequest(request, (res) => {
            //         console.log(res)
            //         that.tabList = res.data.childList;
            //     })
            // },
        },


    });

</script>

</body>

</html>
